<template>
    <div class="account">
        <span class="select" > 全选<span :class="selectall?'active':'radio'" @click="changeselectall"></span></span>
        <span>您共选则了<span class="red">{{total.count}}</span>件商品</span>
        <span>合计：<span class="red">{{total.total | priceFormat}}</span></span>
        <button class="account-btn">结算</button>
    </div>
</template>

<script>
    export default {
        name: "account",
        computed:{
            total(){
             return   this.$store.getters.goodsTotal
            },
            selectall(){//获取state中selectall全选按钮的状态值
             return  this.$store.state.selectAll
            }
        },
        methods:{
            changeselectall(){//点击事件，调用mutation中的方法，改变selectall的状态值
                this.$store.commit('CHANGE_SELECT_ALL')
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/sassstyle";
.account{
    width: 100%;
    height: 40px;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 50px;
    border-top: 1px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    padding: 0 5px;
    .select{
        display: flex;
       align-items: center;
        line-height: 16px;
        .radio{
            margin-left: 5px;
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #CCCCCC;
        }
        .active{
            margin-left: 5px;
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color:$theme-color ;
        }
    }

    .red{
        color: red;
        font-size: 16px;
    }
    .account-btn{
        width: 60px;
        height: 30px;
        background-color: red;
        color: #FFFFFF;
        border-radius: 13px;
    }
}
</style>
